<template>
	<div class="admin">
		<div class="addbox">
			<el-button type="primary" @click="add">新增</el-button>
		</div>
		<div class="tabbox">
			<Bluetable :tHead="tHead" :tData="tableData" @operateClick="operateClick"></Bluetable>
			<pagination :total="query.total" :page.sync="query.page" :limit.sync="query.limit" @pagination="getList" />
		</div>
		<AddDatabase ref='AddDatabase' :openType="openType"></AddDatabase>
	</div>
</template>

<script>
	import AddDatabase from "./components/addDatabase";
	export default {
		components: {
			AddDatabase
		},
		name: "Database",
		data() {
			return {
				query: {
					total: 0,
					page: 1,
					limit: 10
				},
				tHead: [{
						label: "序号",
						index: true
					},
					{
						prop: "aa",
						label: "数据库类型"
					},
					{
						prop: "aa",
						label: "连接地址"
					},
					{
						prop: "aa",
						label: "TNS网络"
					},
					{
						prop: "aa",
						label: "数据库连接类型"
					},
					{
						prop: "aa",
						label: "用户名"
					},
					{
						prop: "aa",
						label: "密码"
					},
					{
						prop: "aa",
						label: "字符编码"
					},
					{
						label: "操作",
						operate: ["编辑", "删除"]
					}
				],
				tableData: [{
					aa: "aa"
				}],
				openType: ""
			}
		},
		methods: {
			getList() {

			},
			operateClick(item, row) {
				if (item == "编辑") {
					this.openType = "edit";
					this.$refs.AddDatabase.show();
				} else if (item == "删除") {
					this.$confirm('确定删除该连接?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				}
			},
			add() {
				this.openType = "add";
				this.$refs.AddDatabase.show();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.admin {
		padding: 18px;

		.addbox {
			text-align: right;
		}

		.tabbox {
			margin-top: 18px;
		}
	}
</style>
